<script setup lang="ts">
import { ref, defineOptions, defineEmits } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const props = defineProps(['target', 'chapter', 'backColor'])
const router = useRouter();
const route = useRoute();
//声明下边点击目录时的子传父事件
const emit = defineEmits(['showChapter1', 'preChapter', 'nextChapter', 'changeIsNight', 'showSetting','sponsor'])
const goChapterEvaluate = () => {
    router.push({
        path: "/chapterEvaluate",
        query: {
            chapterId: props.chapter[props.target].id,
            storyId: route.query.id,
        }
    })
}

</script>
<template>
    <div class="bottomTop">
        <div class="left" @click="$emit('preChapter')">上一章</div>
        <div class="right" @click="$emit('nextChapter')">下一章</div>
    </div>
    <div class="bottomBottom">
        <div>
            <img src="@/assets/ReadingView/目录.png" @click="$emit('showChapter1')" alt="">
            <div class="name">目录</div>
        </div>
        <div @click="emit('showSetting')">
            <img src="@/assets/ReadingView/设置.png" alt="">
            <div class="name">设置</div>
        </div>
        <div>
            <img src="@/assets/ReadingView/打赏.png" @click="emit('sponsor')" alt="">
            <div class="name">推荐打赏</div>
        </div>
        <div>
            <img src="@/assets/ReadingView/章评.png" @click="goChapterEvaluate" alt="">
            <div class="name">章评</div>
        </div>
        <div v-if="backColor !== 'black'" @click="$emit('changeIsNight')">
            <img src="@/assets/ReadingView/夜间.png" alt="">
            <div class="name">夜间</div>
        </div>
        <div v-else @click="$emit('changeIsNight')">
            <img src="@/assets/ReadingView/日间.png" alt="">
            <div class="name">日间</div>
        </div>
    </div>
</template>

<style scoped lang='less'>
.bottomTop {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .75rem;
}

.bottomBottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5vw;
    font-size: 1rem;

    >div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
            width: 8vw;
            display: block;
            margin-bottom: 2vw;
        }
    }
}
</style>